<template>
	<!-- 钱包-提现页面 -->
	<view class="page-box">
		<view class="gn-box">
			<view v-if="accountTypeList.length" @tap="handleFs()">
				<text>提现方式</text>
				<image style="width: 16rpx;height: 16rpx;margin-left: 8rpx;" src="/static/images/rightIcon.png">
				</image>
			</view>
			<view @tap="handleLs()">
				<text>钱包流水</text>
				<image style="width: 16rpx;height: 16rpx;margin-left: 8rpx;" src="/static/images/rightIcon.png">
				</image>
			</view>
		</view>
		<view class="page-main-box">
			<text class="title">钱包余额</text>
			<view class="balance">
				<text>¥</text>
				<text>{{walletInfo.balance}}</text>
			</view>
			<view class="main-box">
				<text style="margin-bottom: 34rpx;">提现金额</text>
				<view class="input-box">
					<text style="color: #0F0D21;font-size: 100rpx;margin-right: 10rpx;">¥</text>
					<input type="digit" v-model="amount" focus placeholder="请输入提现金额"
						placeholderStyle="color:#8C8A8A;fontSize: 50rpx" style="width: 100%;" @input="inputChange" />
				</view>
				<text class="withdrawType-title">请选择提现方式</text>

				<WithdrawSelect ref="withdrawSelectRef" style="width:100%"></WithdrawSelect>

			</view>
			<!-- @tap="handleSub()"> -->
			<view class="btn-box" @tap="handleSub2()">
				立即提现
			</view>
			<text style="color: #8C8A8A;font-size: 24rpx;margin-top: 32rpx;">提现到账说明：平台采用T+1提现金额到账方式</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	import {
		postWithdrawAdd
	} from '@/api/user.js'
	import validation from '@/utils/test'

	// 页面组件
	import WithdrawSelect from './components/withdrawSelect.vue'

	export default {
		components: {
			WithdrawSelect
		},
		data() {
			return {
				withdrawType: null,
				amount: null,

				// 提现方式的list
				listData: [],

				selectListData: '', // 选中的银行卡



			}
		},
		async onPullDownRefresh() {
			await this.handleWallet()
			uni.stopPullDownRefresh()
			uni.showToast({
				duration: 5000,
				title: '刷新成功',
				icon: 'none'
			})
		},
		computed: {
			...mapGetters(['walletInfo', 'userInfo', 'accountTypeList']),
		},
		onLoad() {
			this.withdrawType = this.accountTypeList.length ? this.accountTypeList[0].accountType : 0

		},
		async onShow() {
			await this.handleWallet()

			this.$refs.withdrawSelectRef.init() // 初始化子组件的方法
		},
		methods: {
			...mapActions(['handleWallet']),
			handlexxx(e) {
				!/^(\d+\.?)?\d{0,2}$/.test(e) ? (this.amount = e.substring(0, e.length -
					1)) : ''
			},
			inputChange(e) {
				var that = this
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					that.amount = e.target.value
				})
			},


			handleLs() {
				uni.navigateTo({
					url: '/pages/wallet/flowing/flowing'
				})
			},
			handleFs() {
				uni.navigateTo({
					url: '/pages/wallet/bank'
				})
			},

			/**
			 * 立即提现
			 */
			handleSub2() {
				let selectData = this.$refs.withdrawSelectRef.selectCar
				console.log(selectData, '提现的账户');

				if (Object.keys(selectData).length > 0) {
					this.handleSub(selectData)
				} else {
					uni.showToast({
						duration: 5000,
						title: '还没选择提现账户',
						icon: 'none'
					})
				}

			},

			/**
			 * 提现方式
			 */
			handleSub(val) {
				if (!validation.amount(this.amount)) {
					return uni.showToast({
						duration: 5000,
						title: '请输入最多两位小数的金额',
						icon: 'none'
					})
				} else if (this.amount > this.walletInfo.balance) {
					return uni.showToast({
						duration: 5000,
						title: '提现金额应小于钱包余额',
						icon: 'none'
					})
				}
				const {
					id: userId
				} = this.userInfo
				const {
					id: walletId
				} = this.walletInfo

				// 调用提现接口
				postWithdrawAdd({
					accountId: val.id,
					amount: Number(this.amount)
				}).then(res => {
					if (res.code !== 200) {
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title: '请求失败'
						})
						return
					}
					this.amount = null
					uni.showToast({
						duration: 5000,
						title: '提现成功',
						icon: 'none'
					})
					this.handleWallet()
				}).catch(error => {
					uni.showToast({
						duration: 5000,
						title: '提现操作失败',
						icon: 'none'
					})
				})
			},



		}
	}
</script>

<style lang="less">
	.page-box {
		position: relative;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215, 0.2) 100%);
		min-height: 100vh;

		.gn-box {
			#flex(column);
			position: absolute;
			right: 0;
			top: 20rpx;
			z-index: 20;

			view {
				#flex(-, start, center);
				#box(auto, 48rpx, 48rpx 0px 0px 48rpx, #FDF3F3);
				#font(24rpx, @font-title-color);
				line-height: 48rpx;
				padding: 0 24rpx;
				margin-bottom: 24rpx;
			}
		}

		.page-main-box {
			#box(100%, auto);
			#flex(column, start, center);
			#padding(80rpx 32rpx 0 32rpx);
			position: absolute;
			top: 0;

			.title {
				#font(32rpx, @font-title-color, bold);
				margin-bottom: 40rpx;
			}

			.balance {
				#flex(-, center, flex-start);
				margin-bottom: 140rpx;

				&>text {
					&:last-child {
						#font(100rpx, @font-title-color, bold);
						line-height: 78rpx;
					}

					&:first-child {
						#font(60rpx, @font-title-color);
						margin-right: 16rpx;
					}
				}
			}

			.main-box {
				// #box(685rpx, auto, 40rpx, #fff);
				#font(28rpx, @font-title-color);
				#flex(column, start, flex-start);
				#padding(0 32rpx);

				.input-box {
					#flex(-, start, center);
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

					::v-deep input {
						height: 120rpx;
						line-height: 120rpx;
						font-size: 50rpx;
					}
				}
			}

			.btn-box {
				#box(686rpx, 88rpx, 44rpx, linear-gradient(180deg, #E27C8A 0%, @primay-color 100%));
				#font(36rpx, #FDF3F3);
				#flex(-, center, center);

				margin-top: 48rpx;
			}


			.withdrawType-title {
				#font(32rpx, @font-title-color, black);

				margin: 48rpx 0 32rpx 0;
			}

			.withdrawType-box {
				display: flex;

				.item {
					#box(208rpx, 80rpx, 80rpx, none, 2rpx solid rgba(0, 0, 0, 0.1));
					#flex(-, center, center);
					#font(28rpx, @font-title-color, 500);
					gap: 4rpx;
					margin-right: 32rpx;

				}

				.itemSelect {
					border: 2rpx solid @primay-color;
					color: @primay-color;
				}
			}




		}
	}
</style>